<template>
	<view class="comment-limt-container" v-if="!isShowAllComment">
		<view class="comment-title">精简评论</view>
		<block v-for="(item,index) in commentList.slice(0,2)" :key="index">
			<article-comment-item :data="item.info"></article-comment-item>
		</block>
		<view class="show-more" @click="onMoreClick">查看更多评论</view>
	</view>
	<view class="comment-all-container" v-else>
		<view class="comment-title">全部评论</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallBack" :down="{use:false}" :up="{textNoMore:'--  我也是有底线的！--'}">
		<block v-for="(item,index) in commentList" :key="index">
			<article-comment-item :data="item.info"></article-comment-item>
		</block>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
	import {getArticleCommentList} from 'api/article.js'
	export default {
		name:"article-comment-list",
		mixins:[MescrollMixin],
		props:{
			articleId:{
				type:String,
				required:true
			}
		},
		data() {
			return {
				page:1,
				// 每页评论数
				pageSize:5,
				commentList:[],
				isShowAllComment:false, 
				isInit:true,
				mescroll:null,
				commentListTotal:0
			};
		},
		created() {
			this.loadCommentList()
		},
		methods:{
			async mescrollInit(){
				await this.loadCommentList()
				this.isInit=false
				this.getMescroll().endSuccess()
				this.getMescroll().endBySize(this.commentList.length,this.commentListTotal)
			},
			async upCallBack(){
				if(this.isInit) return 
				this.page += 1
				await this.loadCommentList()
				this.getMescroll().endSuccess()
				this.getMescroll().endBySize(this.commentList.length,this.commentListTotal)
			},
			//获取评论列表数据
			async loadCommentList(){
			const {data:res}	= await getArticleCommentList({
					articleId:this.articleId,
					page:this.page,
					pageSize:this.pageSize
				})
				this.commentListTotal =res.count
				if(this.page === 1){
					this.commentList = res.list
				}else{
					this.commentList = [...this.commentList,...res.list]
				}
			},
			
			onMoreClick(){
				this.isShowAllComment=true
			},
			getMescroll(){
				if(!this.mescroll){
					this.mescroll = this.$refs.mescrollRef.mescroll
				}
				return this.mescroll
			},
			//为评论列表增加一条新评论
			addCommentList(data){
				this.commentList.unshift(data)
			}
		}
	}
</script>

<style lang="scss" scoped>
.comment-title {
  font-weight: bold;
  color: $uni-text-color-title;
  font-size: $uni-font-size-lg;
  margin: $uni-spacing-col-lg 0;
}
.comment-limt-container {
  .show-more {
    margin: $uni-spacing-col-lg;
    text-align: center;
    color: $uni-text-color-more;
    font-size: $uni-font-size-base;
  }
}
</style>
